<template>
	<view>
		<TopNav title="药品库存"></TopNav>
		<view class="padding-bottom">
			<view class=" padding bg-white">
				<view class="text-sl text-bold text-blue">{{form.name || "-"}}</view>
				<view class="text-gray">
					{{form.code || "-"}}
				</view>
			</view>
			<van-cell title="剩余库存" :value="`${form.stock || '0'} ${form.stockUnit || ''}`" class="margin-top" />
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title">
					<text class="text-lg text-bold text-blue">基本信息</text>
					<text class="bg-blue"></text>
				</view>
			</view>
			<van-cell-group class="padding-lr-sm">
				<van-cell title="规格"
					:value="`${form.specifications || '0'} ${form.specificationsUnitDictName || ''}`" />
				<van-cell title="类型" :value="form.secondTypeDictName || '-'" />
				<van-cell title="生产厂家" :value="form.manufacturer || '-'" />
				<van-cell title="所属基地" :value="form.productionBaseName || '-'" />
				<van-cell title="所属仓库" :value="form.warehouseName || '-'" />

			</van-cell-group>
			<view class=" padding bg-white margin-top flex">
				<view class="padding-right">
					<image :src="baseUrl + form.createUserAvatar" mode="" class="cu-avatar lg radius bg-gray"></image>
				</view>
				<view class="">
					<view class="text-xl text-bold text-blue">{{form.createUsername || "-"}}</view>
					<view class="text-gray">
						{{form.createTime || "-"}} 记录
					</view>
				</view>
			
			</view>
			<van-cell-group class="margin-top" v-if="form.remarks">
				<van-cell title="备注" :value="form.remarks || '-'" />
			</van-cell-group>
			<view v-if="form.fileUrls">
				<view class="cu-bar bg-white margin-top">
					<view class="action sub-title">
						<text class="text-lg text-bold text-blue">相关照片</text>
						<text class="bg-blue"></text>
					</view>
				</view>
				<view class="padding bg-white">
					<view class="grid flex-sub padding-lr col-2 grid-square">
						<view class="bg-img" :style="'background-image: url(' + src + '); height: 120px; padding: 0'"
							v-for="(src, index) in getImages(form.fileUrls)" :key="index"></view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title">
					<text class="text-lg text-bold text-blue">出入库记录</text>
					<text class="bg-blue"></text>
				</view>

			</view>
			<view class="">
				<uni-table ref="table" border stripe emptyText="暂无更多数据" width="100%">
					<uni-tr>
						<uni-th align="center">时间</uni-th>
						<uni-th align="center">操作</uni-th>
						<uni-th align="center">数量</uni-th>
						<uni-th align="center">库存</uni-th>
						<uni-th align="center">操作人</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in inventoryList" :key="index">
						<uni-td align="center">{{ item.time }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.bizType }}</view>
						</uni-td>
						<uni-td align="center">{{ item.quantity }}{{item.quantityUnit}}</uni-td>
						<uni-td align="center">{{ item.stock }}{{item.stockUnit}}</uni-td>
						<uni-td align="center">
							<text>{{item.createUsername || '-'}}</text>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="bg-white padding-lr-sm padding-bottom-sm">
					<view class="text-gray padding-bottom-sm flex justify-between">
						<text class="text-gray padding-right">（仅查询近三月数据）</text>
						<text>共 {{inventoryTotal}} 条数据</text>
					</view>
					<uni-pagination :page-size="inventoryQueryParams.pageSize" v-model="inventoryQueryParams.pageNum"
						:total="inventoryTotal" @change="getInventoryList" />
				</view>
			</view>
		</view>
		<view class="bottom-tools padding flex justify-around bg-white">
			<van-button class='basis-sm' plain hairline type="primary" @click="handleToPage('inbound')">入库</van-button>
			<van-button class='basis-sm' plain hairline type="info" @click="handleToPage('outbound')">
				出库
			</van-button>
		</view>
	</view>
</template>

<script>
	import {
		detail,
		listInventory
	} from "@/api/work/products-inventory"
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				inventoryList: [],
				inventoryTotal: 0,
				baseUrl: getApp().globalData.config.baseUrl,
				queryParams: {
					id: undefined,
					productTypeDict: 'YP'
				},
				inventoryQueryParams: {
					productId: undefined,
					productTypeDict: 'YP',
					startDate: dayjs().subtract(3, 'month').format('YYYY-MM-DD'),
					endDate: dayjs().format('YYYY-MM-DD'),
					pageSize: 10,
					pageNum: 1
				},
				form: {}
			}
		},
		onLoad(query) {
			if (query.id) {
				this.queryParams.id = query.id
				this.inventoryQueryParams.productId = query.id
				this.getDetail()
				this.getInventoryList()
			}
		},
		onUnload() {
			uni.$off('refreshData', this.refreshData())
		},
		methods: {
			getInventoryList() {

				listInventory(this.inventoryQueryParams).then(res => {
					let {
						rows,
						total
					} = res
					this.inventoryTotal = total
					this.inventoryList = rows
				})
			},
			refreshData() {
				this.getDetail()
				this.getInventoryList()
			},
			handleToPage(path, params = {}) {
				let {
					id,
					name,
					specificationsUnitDictName
				} = this.form
				uni.$on('refreshData', this.refreshData)
				switch (path) {
					case 'inbound':
						this.$tab.navigateTo('./inbound' + `?id=${id}&name=${name}&unit=${specificationsUnitDictName}`)
						break;
					case 'outbound':
						this.$tab.navigateTo('./outbound' + `?id=${id}&name=${name}&unit=${specificationsUnitDictName}`)
						break;
				}
			},
			getDetail() {
				detail(this.queryParams).then(res => {
					this.form = res.data

				})
			},
			getImages(files) {
				if (!files) return
				const list = files.split(',').map(url => this.baseUrl + url);
				return list;
			},
		}
	}
</script>

<style lang="scss">
	@import "@/common/var.scss";
	page {
		@include fixed-bottom;
	}
	
</style>
<style scoped lang="scss">
	::v-deep .uni-table {
		min-width: 100% !important;
	}
</style>